<template>
	<view style="height: 100%;width: 80%;">
		<!-- 放置图表容器 -->
		<qiun-data-charts type="line" :chartData="chartData" :opts="opts" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		watch,
		defineEmits,onMounted
	} from "vue"
	const props = defineProps(['data'])
	const emit = defineEmits(['change'])
	// onMounted(()=>{
	// 	emit("change","这是子父传值")
	// })
	watch(()=>props.data,(val)=>{
		console.log(props.data,17)
		// chartData.data = props.data
		let temp = []
		// for(val of props.data){
		// 	temp.push(val)
		// }
		chartData.series[0].data = props.data.data
		chartData.series[0].name = props.data.name+`(${props.data.unit})`
		console.log(chartData,25)
	},{
		// immediate:true,
		deep:true
	})
	const chartData = reactive({
		// categories: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
		series: [{
			name: props.data.name+`(${props.data.unit})`,
			data: props.data.data,
			color: "#1989fa" // 自定义线条颜色
		}]
	}) // 图表数据
	const opts = reactive({
		fontSize: 11,
		legend: {
			show: true
		},
		xAxis: {
			gridColor: "#CCCCCC"
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			line: {
				type: "curve", // 曲线类型：curve（平滑曲线）/ straight（直线）
				width: 2
			}
		}
	})

</script>